<template>
  <div 
    class="lca-section" 
    :class="{ active: active }"
    @click="$emit('click')"
  >
    <div class="section-header">
      <div class="section-number">{{ title.split(' ')[0] }}</div>
      <h2>{{ title.split(' ').slice(1).join(' ') }}</h2>
    </div>
    
    <div class="section-body" v-if="active">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: String,
  active: Boolean
});

defineEmits(['click']);
</script>

<style scoped>
.lca-section {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lca-section.active {
  border-color: #2e7d32;
}

.section-header {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #f5f5f5;
}

.section-number {
  font-size: 24px;
  font-weight: bold;
  color: #2e7d32;
  margin-right: 16px;
}

.section-header h2 {
  margin: 0;
  color: #333;
  font-size: 20px;
}

.section-body {
  background-color: white;
}
</style>